<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
  <link rel="stylesheet" href="static/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/css/all.min.css">
	<link rel="stylesheet" href="static/css/themify-icons.css">
  <link rel="stylesheet" href="static/css/nice-select.css">
  <link rel="stylesheet" href="static/css/owl.theme.default.min.css">
  <link rel="stylesheet" href="static/css/owl.carousel.min.css">

  <link rel="stylesheet" href="static/css/style.css">
  <style>
    .breadcrumb{
      padding-left: 6px;
      padding-right: 6px;
    }

    .p{
      width: 960px;
      margin: 0 auto;
      
    }

    .m-style .prev , .m-style .next{
      background: pink;
      color: #fff;
    }

    .m-style .active{
      background: orange;
    }
    
    .m-style {
    position: relative;
    text-align: center;
    zoom: 1;
    display: flex;
    justify-content: space-between;
  }

  .m-style:before,
  .m-style:after {
    content: "";
    display: table
  }

  .m-style:after {
    clear: both;
    overflow: hidden
  }

  .m-style span {
    float: left;
    margin: 0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    color: #bdbdbd;
    font-size: 14px
  }

  .m-style .active {
    float: left;
    margin: 0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #e91e63;
    color: #fff;
    font-size: 14px;
    border: 1px solid #e91e63
  }

  .m-style a {
    float: left;
    margin: 0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #fff;
    border: 1px solid #ebebeb;
    color: #bdbdbd;
    font-size: 14px
  }

  .m-style a:hover {
    color: #fff;
    background: #e91e63
  }

  .m-style .next,
  .m-style .prev {
    width: 100px;
    font-family: simsun;
    font-size: 16px;
    font-weight: 700
  }

  .now,
  .count {
    padding: 0 5px;
    color: red
  }

  .eg img {
    max-width: 960px;
    min-height: 500px
  }

  input {
    float: left;
    margin: 0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #fff;
    border: 1px solid #ebebeb;
    outline: 0;
    color: #bdbdbd;
    font-size: 14px
  }
 
  </style>
</head>
<body>
  <!--================ Start Header Menu Area =================-->
	<header class="header_area">
    <div class="main_menu">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
          <a class="navbar-brand logo_h" href=""><img src="static/picture/logo.png" alt=""></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
            <ul class="nav navbar-nav menu_nav ml-auto mr-auto">
              <li class="nav-item active"><a class="nav-link" href="">首页</a></li>
              <li class="nav-item submenu dropdown">
                <a  class="nav-link" href="Javascript:;" name="cart" >购物车</a>
							</li>
							<li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">状态</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a name="login"  class="nav-link" href="login.html">登陆</a></li>
                  <li class="nav-item"><a class="nav-link" href="register.html">注册</a></li>
                  <li class="nav-item"><a name="logout" class="nav-link"  role="button">注销登录</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link" href="contact.html">联系我们</a></li>
            </ul>

            <ul class="nav-shop">
              <input type="text" placeholder="搜索您需要的商品..."><button>搜索</button>
              <!-- <li class="nav-item"><button><i class="ti-search"></i></button></li> -->
              <!-- <li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">10</span></button> </li> -->
              <!-- <li class="nav-item"><a class="button button-header" href="#">立即购买</a></li> -->
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </header>
	<!--================ End Header Menu Area =================-->

  <main class="site-main">
    
    <!--================ Hero banner start =================-->
    <section class="hero-banner">
      <div class="container">
        <div class="row no-gutters align-items-center pt-60px">
          <div class="col-5 d-none d-sm-block">
            <div class="hero-banner__img">
              <img class="img-fluid" src="static/picture/hero-banner.png" alt="">
            </div>
          </div>
          <div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
            <div class="hero-banner__content">
              <h4>商店很有趣</h4>
              <h1>浏览我们的优质产品</h1>
              <p>我们所推荐的产品，都是经过供应商，层层把关，质量无可厚非。我们将以质量及时尚来引领世界的潮流。</p>
              <a class="button button-hero" href="#">立即预览</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--================ 按钮 =================-->
    <ul name="list" class="fen-lei" style="display: flex;justify-content: space-around; width: 100%;" id="list"></ul>
    <!--================ Hero Carousel start =================-->
    <section class="section-margin mt-0">
      <div class="owl-carousel owl-theme hero-carousel">
        <div class="hero-carousel__slide">
          <img src="static/picture/hero-slide1.png" alt="" class="img-fluid">
          <a href="#" class="hero-carousel__slideOverlay">
            <h3>了解一下</h3>
            <p>总有一款适合您....</p>
          </a>
        </div>
        <div class="hero-carousel__slide">
          <img src="static/picture/hero-slide2.png" alt="" class="img-fluid">
          <a href="#" class="hero-carousel__slideOverlay">
            <h3>了解一下</h3>
            <p>总有一款适合您....</p>
          </a>
        </div>
        <div class="hero-carousel__slide">
          <img src="static/picture/hero-slide3.png" alt="" class="img-fluid">
          <a href="#" class="hero-carousel__slideOverlay">
            <h3>了解一下</h3>
            <p>总有一款适合您....</p>
          </a>
        </div>
      </div>
    </section>
    <!--================ Hero Carousel end =================-->

    <!-- ================ trending product section start ================= -->  
    <section class="section-margin calc-60px">
      <div class="container">
        <div class="section-intro pb-60px">
          <p>市场热销品</p>
          <h2>热门 <span class="section-intro__style">产品</span></h2>
        </div>
        <div class="row zhanshi" >

        </div>
      </div>
    </section>
    <!-- ================ trending product section end ================= -->  
    <div name="p" class="m-style p"></div>
  </main>
  

  <!--================ Start footer Area  =================-->	
	<footer class="footer">
		<div class="footer-area">
			<div class="container">
				<div class="row section_gap">
					<div class="col-lg-3 col-md-6 col-sm-6">
						<div class="single-footer-widget tp_widgets">
							<h4 class="footer_title large_title">我们的任务</h4>
							<p>
								新年已来到，向你问个好。开心无烦恼，好运跟着跑。家人共团聚，天伦乐逍遥。朋友相扶持，心情不寂寥。
							</p>
							<p>
                事业风水顺，金银撑荷包。祝生活开心步步高！
							</p>
						</div>
					</div>
					<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
						<div class="single-footer-widget tp_widgets">
							<h4 class="footer_title">快速链接 </h4>
							<ul class="list">
								<li><a href="#">家</a></li>
								<li><a href="#">店铺</a></li>
								<li><a href="#">博客</a></li>
								<li><a href="#">产品</a></li>
								<li><a href="#">品牌</a></li>
								<li><a href="#">联系我们</a></li>
							</ul>
						</div>
					</div>
					<div class="col-lg-2 col-md-6 col-sm-6">
						<div class="single-footer-widget instafeed">
							<h4 class="footer_title">风格</h4>
							<ul class="list instafeed d-flex flex-wrap">
								<li><img src="static/picture/r1.jpg" alt=""></li>
								<li><img src="static/picture/r2.jpg" alt=""></li>
								<li><img src="static/picture/r3.jpg" alt=""></li>
								<li><img src="static/picture/r5.jpg" alt=""></li>
								<li><img src="static/picture/r7.jpg" alt=""></li>
								<li><img src="static/picture/r8.jpg" alt=""></li>
							</ul>
						</div>
					</div>
					<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
						<div class="single-footer-widget tp_widgets">
							<h4 class="footer_title">联系我们</h4>
							<div class="ml-40">
								<p class="sm-head">
									<span class="fa fa-location-arrow"></span>
									总公司
								</p>
								<p>北京市新晨股份有限公司</p>
	
								<p class="sm-head">
									<span class="fa fa-phone"></span>
									联系电话
								</p>
								<p>
									+123 456 7890 <br>
									+123 456 7890
								</p>
	
								<p class="sm-head">
									<span class="fa fa-envelope"></span>
									电子邮件
								</p>
								<p>
									free@infoexample.com <br>
									www.infoexample.com
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="footer-bottom">
			<div class="container">
				<div class="row d-flex">
					<p class="col-lg-12 footer-text text-center">
						增值电信业务经营许可证;XXXX    市场名称登记证;XXXXX      出版物网络交易平台服务经营备案证;****************
				</div>
			</div>
		</div>
	</footer>
	<!--================ End footer Area  =================-->
  <script src="./tools/jquery.min.js"></script>
  <script src="./tools/jquery-pagination/jquery.pagination.js"></script>
  <script src="./js/tools.js"></script>
  <script src="./js/ajax.js"></script>
  <script src="./js/cookie.js"></script>
  <script src="./js/index.js"></script>
  <!-- <script src="./server/goods_list.php"></script> -->
</body>
</html>